<template>
  <div style="margin: 0 auto;">
    <vue2-org-tree
      :data="data"
      :horizontal="horizontal"
      :collapsable="collapsable"
      :label-class-name="labelClassName"
      :render-content="renderContent"
      selected-class-name="bg-tomato"
      selected-key="selectedKey"
      @on-expand="onExpand"
      @on-node-click="onNodeClick"
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: {
        id: 0,
        label: 'XXX科技有限公司',
        children: [{
          id: 2,
          label: '产品研发部',
          children: [{
            id: 5,
            label: '研发-前端'
          }, {
            id: 6,
            label: '研发-后端',
            disabled: true
          }, {
            id: 9,
            label: 'UI设计'
          }, {
            id: 10,
            label: '产品经理'
          }]
        }, {
          id: 3,
          label: '销售部',
          children: [{
            id: 7,
            label: '销售一部'
          }, {
            id: 8,
            label: '销售二部'
          }]
        }, {
          id: 4,
          label: '财务部',
          disabled: true
        }, {
          id: 9,
          label: 'HR人事'
        }]
      },
      expandAll: false,
      horizontal: false,
      collapsable: true
    }
  },
  methods: {
    labelClassName: function (data) {
      return 'clickable-node'
    },
    renderContent: function (h, data) {
      return (
        <el-popover
          placement="top-start"
          width="200"
          trigger="click">
          <span class="hover-box">
            <i class="el-icon-edit"></i>
            <i class="el-icon-circle-plus-outline"></i>
            <i class="el-icon-delete"></i>
          </span>
          <div slot="reference">{data.label}</div>
        </el-popover>
      )
    },
    onExpand: function (e, data) {
      if ('expand' in data) {
        data.expand = !data.expand

        if (!data.expand && data.children) {
          this.collapse(data.children)
        }
      } else {
        this.$set(data, 'expand', true)
      }
    },
    onNodeClick: function (e, data) {
      this.$set(data, 'selectedKey', !data.selectedKey)
    },
    collapse: function (list) {
      var _this = this
      list.forEach(function (child) {
        if (child.expand) {
          child.expand = false
        }

        child.children && _this.collapse(child.children)
      })
    },
    expandChange: function () {
      this.toggleExpand(this.data, this.expandAll)
    },
    toggleExpand: function (data, val) {
      var _this = this
      if (Array.isArray(data)) {
        data.forEach(function (item) {
          _this.$set(item, 'expand', val)
          if (item.children) {
            _this.toggleExpand(item.children, val)
          }
        })
      } else {
        this.$set(data, 'expand', val)
        if (data.children) {
          _this.toggleExpand(data.children, val)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.org-tree-container {
  width: 500px;
  height: 500px;
}
.org-tree-node-label {
  white-space: nowrap;
}
.bg-white {
  background-color: white;
}
.bg-orange {
  background-color: orange;
}
.bg-gold {
  background-color: gold;
}
.bg-gray {
  background-color: gray;
}
.bg-lightpink {
  background-color: lightpink;
}
.bg-chocolate {
  background-color: chocolate;
}
.bg-tomato {
  background-color: tomato;
}
/deep/ .clickable-node {
  cursor: pointer;
}
.hover-box {
  display: flex;
  align-items: center;
  justify-content: space-around;
  i {
    margin-right: 10px;
  }
}
</style>
